<template>
    <div class="footer" @click="closeSearch">
        <div class="container">
            <div class="footerHeader">
                <text @click.stop="jump('/')" class="index">首页</text>
                <div class="search" :class="{ active: isSearchActive }">
                    <input
                        type="text"
                        placeholder="请输入搜索内容"
                        @focus="activateSearch"
                        @click.stop
                    />
                    <img src="/icons/search.png" @click.stop />
                </div>
            </div>
            <div class="footerContent">
                <div class="contents">
                    <text class="title">Postgraduate</text>
                    <div class="content">
                        <text>简介</text>
                        <text>联系我们</text>
                        <text>帮助中心</text>
                        <text>隐私政策</text>
                    </div>
                </div>

                <div class="contents">
                    <text class="title">活动与目标</text>
                    <div class="content">
                        <text>简介</text>
                        <text>联系我们</text>
                        <text>帮助中心</text>
                        <text>隐私政策</text>
                    </div>
                </div>

                <div class="contents">
                    <text class="title">发现</text>
                    <div class="content">
                        <text>简介</text>
                        <text>联系我们</text>
                    </div>
                </div>

                <div class="contents">
                    <text class="title">更多</text>
                    <div class="content">
                        <text>简介</text>
                        <text>联系我们</text>
                        <text>帮助中心</text>
                        <text>隐私政策</text>
                    </div>
                </div>

                <div class="contents">
                    <text class="title">技术栈</text>
                    <div class="content">
                        <text>Vue3</text>
                        <text>Node.js</text>
                        <text>Mysql</text>
                        <text>Spring</text>
                        <text>MyBatis</text>
                        <div class="more">
                            <text>更多</text>
                            <img src="/icons/right.png" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="footerMiddle">
                <text>关注我们</text>
                <div class="icons">
                    <img src="/icons/wechat.png" />
                    <img src="/icons/qq.png" />
                </div>
            </div>

            <div class="footerBottom">
                <text>Copyright © 2023 Postgraduate. All rights reserved.</text>
                <text>Powered by Postgraduate</text>
                <text>Designed by Postgraduate</text>
            </div>
        </div>
    </div>
</template>

<script setup>
import router from "@/router";
import { ref } from "vue";

const isSearchActive = ref(false);

const jump = (path) => {
    router.push(path);
};

const activateSearch = () => {
    isSearchActive.value = true;
};

const closeSearch = () => {
    isSearchActive.value = false;
};
</script>

<style lang="scss" scoped>
.footer {
    width: 100%;
    background-color: #f2f2f2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    .container {
        margin: 10px 120px;

        .footerHeader {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 2px solid rgba(218, 213, 213, 0.5);

            .index {
                cursor: pointer;
                color: #5b5959;
            }

            .search {
                background-color: white;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 5px;
                transition: transform 0.3s, box-shadow 0.3s;
                border: 1px solid rgba(77, 74, 74, 0.2);

                &.active {
                    //   transform: translateY(-1px);
                    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
                }

                input {
                    width: 250px;
                    border: none;
                    border-right: 1px solid rgba(77, 74, 74, 0.5);
                    padding: 5px;
                    font-size: large;
                    outline: none;
                }

                img {
                    margin: 0 10px;
                    width: 30px;
                }
            }
        }

        .footerContent {
            display: flex;
            padding: 40px 20px;
            justify-content: space-between;

            .contents {
                display: flex;
                flex-direction: column;

                .title {
                    font-weight: bold;
                    margin-bottom: 10px;
                }

                .content {
                    display: flex;
                    flex-direction: column;

                    text {
                        margin: 10px 0;
                        font-size: small;
                        color: #5b5959;
                        cursor: pointer;
                    }

                    .more {
                        display: flex;
                        align-items: center;
                        cursor: pointer;

                        img {
                            width: 20px;
                            height: 20px;
                        }
                    }
                }
            }
        }

        .footerMiddle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-top: 2px solid rgba(218, 213, 213, 0.5);
            border-bottom: 2px solid rgba(218, 213, 213, 0.5);

            .icons {
                img {
                    margin: 0 30px;

                    height: 30px;
                }
            }
        }

        .footerBottom {
            display: flex;
            margin: 0 30px;
            justify-content: space-between;
            align-items: center;
            padding: 20px;

            text {
                color: #5b5959;
                font-size: smaller;
            }
        }
    }
}
</style>
